<template>
  <div>
    <h1>
      <!-- 2. v-model控制checkbox选中 -->
      全选: <input type="checkbox" v-model="isAll" />
      <button>反选</button>
      <ul>
        <li v-for="item in list" :key="item.name">
          <input type="checkbox" v-model="item.checked" /> {{ item.name }}
        </li>
      </ul>
    </h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { checked: true, name: "八戒" },
        { checked: false, name: "悟空" },
        { checked: false, name: "师父" },
        { checked: true, name: "沙师弟" },
      ],
    };
  },

  computed: {
    // 1. 定义计算属性
    isAll() {
      // 3. 通过every判断是否每个小选框都选中了
      const res = this.list.every((item) => {
        return item.checked === true;
      });
      return res;
    },
  },
};
</script>

<style></style>
